<template>
    <el-dialog title="查看图片" :visible.sync="visible" :close-on-click-modal="false" append-to-body @close="cancel">
        <ImagePreview v-if="pictureUrl" :src="pictureUrl" />
        
        <div slot="footer" class="dialog-footer">
            <el-button type="warning" :loading="loading" @click="changePicture()">更新图片</el-button>
            <el-button @click="visible = false">取 消</el-button>
        </div>

        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".jpg, .png" :headers="upload.headers" :action="upload.url"
                :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
                :auto-upload="false" :data="{ propertyName: propertyName, propertyType: propertyType }" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <span>仅允许上传jpg、png格式文件。</span>

                </div>
            </el-upload>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
import ImagePreview from '@/components/ImagePreview/index.vue';

export default {
    components: {
        ImagePreview
    },
    name: 'PropertyPictureDialog',
    props: {
        id: { type: Number, default: 0 },
        propertyName: { type: String, default: '' },
        propertyType: { type: String, default: '' },
        pictureUrl: { type: String, default: '' },
    },
    data() {
        return {
            visible: false,
            loading: false,
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: '',
            },
        }
    },
    watch: {
        id(newValue) {
            if (newValue > 0) {
                //弹窗
                this.visible = true
            } else {
                //关闭弹窗
                this.visible = false
            }
        }
    },
    methods: {
        // 取消按钮
        cancel() {
            this.close(false);
        },
        close(isRefresh) {
            this.$emit('update:id', 0);
            this.$emit('update:pictureUrl', '');
            this.$emit('update:propertyName', '');
            this.$emit('update:propertyType', '');
            this.$emit('close', isRefresh);
        },
        changePicture() {
            this.upload.title = "图片替换";
            this.upload.updateSupport = true;
            this.upload.propertyName = true;
            this.upload.propertyType = true;
            if (this.propertyType == '1') {
                this.upload.url = process.env.VUE_APP_BASE_API + "/system/shebei/uploadPropertyPicture";

            } else if (this.propertyType == '2') {
                this.upload.url = process.env.VUE_APP_BASE_API + "/system/dinai/uploadPropertyPicture";

            } else if (this.propertyType == '3') {
                this.upload.url = process.env.VUE_APP_BASE_API + "/system/jiaju/uploadPropertyPicture";

            }
            this.upload.open = true;
        },

        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.close(true);
            this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "上传结果", { dangerouslyUseHTMLString: true });

        },
        submitFileForm() {
            this.$refs.upload.submit();
        },
        uploadPicture(row) {
            this.id4ShebeiDialog = row.id;
            this.propertyName4ShebeiDialog = row.instrumentName + '';
            this.propertyTypeShebeiDialog = '1';
            this.pictureUrl4ShebeiDialog = row.pictureUrl + '';
        },
    }
}
</script>
